<template>
  <div id="app">
    <!-- 上传的功能 input type="file" name="" form ajax + formdata -->
    <!-- 
        name 输入框提交到后台的字段名
        action 提交到后端的路径
        limit 限制提交个数
        钩子函数：
        on-exceed 用来如果超出限制后，会执行此方法
        on-change 如果当前上传文件的状态发生变化的时候会触发，如果用户选择了文件
        on-success 上传成功
        on-error 上传失败
        on-progress 进度条，上传时多次触发
    -->
    <my-upload 
      name="avatar"
      action="http://localhost:3000/upload"
      :file-list="fileList"
      :limit="3"
      accept="image/jpeg"
      :multiple="true"
      :on-exceed="handleExceed"
      :on-change="handleChange"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-progress="handleProgress"
      :beforeUpload="beforeUpload"
      :drag="true"
    >
      <my-button type="primary" icon="tianjia">点击上传</my-button>
      <div slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </my-upload>
  </div>
</template>

<script>


export default {
  name: 'App',
  data(){
    return {
        fileList:[
          {url:'xxx',name:'文件'},
        ]
    }
  },
  methods:{
    handleExceed(files,fileList){
      //1.超过限制
      console.log('用户传递已经超过预期数量')
    },
    handleChange(file){
      console.log(file)
    },
    handleSuccess(){

    },
    handleError(){

    },
    handleProgress(){

    },
    beforeUpload(rawFile){
      let limitSize = rawFile.size / 1024 > 500;
      if(limitSize){
        console.log('当前超过了最大限制')
        return false
      }else if(!rawFile.name.endsWith('.jpg')){
        console.log('文件类型不对')
        return false
      }
      return true
    },
  }
}
</script>

<style lang="scss">

</style>
